<template>
  <div class="data-view" v-title :data-title="title">
    <dv-full-screen-container>
      <div class="top-header">
        <dv-decoration-8 style="width:25%;height:2rem;" />
        <dv-decoration-5 style class="th-middle" />"
        <dv-decoration-8 :reverse="true" style="width:25%;height:2rem;" />
        <div class="title">{{title}}</div>
      </div>
      <dv-loading v-if="loading">Loading...</dv-loading>
      <!-- 主体内容 -->
      <div class="contenter">
        <div class="content-left">
          <dv-border-box-1 class="Live-item">
            <div class="live-title">直播间一</div>
            <Flyplay :name="playList[0]['name']" :value="playList[0]['value']"></Flyplay>
          </dv-border-box-1>
          <dv-border-box-1 class="Live-item">
            <div class="live-title">直播间二</div>
            <Flyplay :name="playList[1]['name']" :value="playList[1]['value']"></Flyplay>
          </dv-border-box-1>
          <dv-border-box-1 class="Live-item">
            <div class="live-title">直播间三</div>
            <Flyplay :name="playList[2]['name']" :value="playList[2]['value']"></Flyplay>
          </dv-border-box-1>
          <dv-border-box-1 class="Live-item">
            <div class="live-title">直播间四</div>
            <Flyplay :name="playList[3]['name']" :value="playList[3]['value']"></Flyplay>
          </dv-border-box-1>
        </div>
        <div class="content-middle">
          <dv-border-box-11 :title="flayLineTitle" class="max-box">
            <!-- 飞天图 -->
            <div class="flyline">
              <dv-flyline-chart :config="configFlyLine" style="width:72%;height:72%" />
            </div>
            <div class="middle-price">
              {{flayText}}
              <dv-digital-flop :config="numberText" style="width: 120px;height: 24px" />
            </div>
            <div class="middle-price" style="bottom:5rem">
              数据二
              <dv-digital-flop :config="numberText" style="width: 120px;height: 24px" />
            </div>
            <div class="middle-price" style="bottom:9rem">
              数据三
              <dv-digital-flop :config="numberText" style="width: 120px;height: 24px" />
            </div>
          </dv-border-box-11>
          <div class="box-list">
            <dv-border-box-8 class="box">
              <!-- 排行 -->
              <div class="box-text-style">{{configListChartTitle}}</div>
              <dv-scroll-ranking-board :config="configlist" style="height:25rem" />
            </dv-border-box-8>
            <dv-border-box-8 class="box" :reverse="true">
              <div class="box-text-style">{{configListTitle}}</div>
              <dv-capsule-chart :config="configCapsule" style="height:25rem" />
            </dv-border-box-8>
          </div>
        </div>
        <div class="content-right">
          <div class="box box-01">
            <div class="box-text-style">{{pie_chart_title}}</div>
            <dv-decoration-10 style="width:90%;height:5px;" />
            <!-- 饼图 -->
            <dv-charts :option="configChart" class="chartStyle" />
          </div>
          <dv-border-box-12 class="box">
            <!-- 水位图 -->
            <div class="box-text-style">计划累计销售金额</div>
            <div style="display: flex; justify-content: center;">
              <dv-digital-flop :config="configWatherPrice" style="width:200px;height:50px;" />
            </div>
            <dv-water-level-pond :config="configWater" class="configWater" />
          </dv-border-box-12>
          <div class="box box-03">
            <dv-charts :option="configGauge" />
          </div>
        </div>
        <div class="content-last-right">
          <div class="box-text-style">数据展示</div>
          <dv-decoration-9 style="width:12rem;height:12rem;margin:0 auto">66%</dv-decoration-9>

          <div class="barLine" style="width: 100%;height: 24rem; margin-top: 3rem;">
            <div class="box-text-style">数据展示</div>
            <dv-charts :option="configGaugeTwo" style="margin-top: -4rem;" />
          </div>

          <div class="barLine" style="width: 100%;height: 22rem; margin-top: -2rem; padding-left: 1rem;     box-sizing: border-box;">
            <dv-charts :option="configbar" />
          </div>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import map from '../assets/chinamap.png'
import hostUrl from "../unilt/config"
import axios from 'axios'
import Flyplay from "../components/video"
export default {
  name: 'Home',
  components: {
    Flyplay
  },
  data () {
    return {
      loading: true,
      title: '微云控直播电商大数据中心',
      flayText: '',
      playList: [
        {
          name: 'videoElement',
          value: 'http://pull-flv-f1.douyincdn.com/stage/stream-106694649653756005_or4.flv',
        },
        {
          name: 'videoElement2',
          value: 'http://pull-flv-f11.douyincdn.com/stage/stream-106694645697740901_or4.flv',
        },
        {
          name: 'videoElement3',
          value: 'http://pull-l3.douyincdn.com/stage/stream-394925391078490194_or4.flv',
        },
        {
          name: 'videoElement4',
          value: 'http://pull-flv-l1.douyincdn.com/stage/stream-106694682738950174_or4.flv',
        }
      ],
      numberText: {
        number: [0],
        content: '{nt}元',
        style: {
          fontSize: 20,
          fill: '#3de7c9'
        }
      },
      flayLineTitle: '',
      configFlyLine: {
        centerPoint: [0.71, 0.54],
        points: [
          [0.90, 0.16],
          [0.90, 0.26],
          [0.85, 0.33],
          [0.78, 0.49],
          [0.83, 0.55],
          [0.78, 0.61],
          [0.84, 0.68],
          [0.70, 0.65],
          [0.77, 0.72],
          [0.69, 0.73],
          [0.82, 0.76],
          [0.72, 0.83],
          [0.63, 0.84],
          [0.73, 0.43],
          [0.68, 0.46],
          [0.63, 0.47],
          [0.52, 0.64],
          [0.61, 0.67],
          [0.59, 0.76],
          [0.88, 0.82],
          [0.65, 0.97],
          [0.49, 0.82],
          [0.53, 0.53],
          [0.24, 0.60],
          [0.40, 0.50],
          [0.62, 0.37],
          [0.24, 0.30]


        ],
        bgImgUrl: map
      },
      configChart: {},
      configlist: {},
      configCapsule: {},
      configWater: {},
      configWatherPrice: {
        number: [0],
        content: '{nt}元',
        style: {
          fontSize: 20,
          fill: '#3de7c9'
        }
      },
      configGauge: {},
      configbar: {
        title: {
          text: '周销售额趋势',
          style: {
            fill: '#fff',
          }
        },
        xAxis: {
          name: '第一周',
          data: 'value',
          nameTextStyle: { fill: "#fff", fontSize: 10 },
          axisLabel: {
            style: {
              fill: '#fff',
              fontSize: 10,
              rotate: 0
            }
          }
        },
        yAxis: {
          name: '销售额',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          nameTextStyle: { fill: "#fff", fontSize: 10 },
          axisLabel: {
            style: {
              fill: '#fff',
              fontSize: 10,
              rotate: 0
            }
          }
        },
        series: [
          {
            data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
            type: 'bar',
            animationCurve: 'easeOutBack'
          }
        ]
      },
      configGaugeTwo: {
        series: [
          {
            type: 'gauge',
            radius: '70%',
            startAngle: -Math.PI / 2,
            endAngle: Math.PI * 1.5,
            arcLineWidth: 10,
            data: [
              { name: 'A', value: 70, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'] },
              { name: 'B', value: 65, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'], radius: '58%' },
              { name: 'C', value: 50, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'], radius: '46%' },
              { name: 'D', value: 50, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'], radius: '34%' },
              { name: 'E', value: 80, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'], radius: '22%' }
            ],
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            pointer: {
              show: false
            },
            dataItemStyle: {
              lineCap: 'round'
            },
            backgroundArc: {
              show: false
            },
            details: {
              show: true,
              formatter: '{name}占比{value}%',
              position: 'start',
              offset: [-10, 0],
              style: {
                fill: '#1ed3e5',
                fontSize: 13,
                textAlign: 'right',
              }
            }
          }
        ]
      }
    }
  },
  mounted () {
    let _this = this
    axios.get(hostUrl.host + '/index/basic/index').then(function (res) {
      let data = res.data.data
      _this.title = data.title
      _this.playList = data.live_list

      let numberFormat = {
        number: [Number(data.flay_line.fl_data_one[1])],
        content: '{nt}元',
        style: {
          fontSize: 20,
          fill: '#3de7c9'
        }
      }
      _this.flayLineTitle = data.flay_line.title
      _this.numberText = numberFormat
      _this.flayText = data.flay_line.fl_data_one[0]

      _this.configListChartTitle = data.list_chart_title
      _this.configlist = data.list_chart
      _this.configListTitle = data.list_title
      _this.configCapsule = data.list

      _this.pie_chart_title = data.pie_chart_title
      _this.configChart = data.pie_chart

      _this.configWater = data.water_chart
      _this.configWatherPrice = {
        number: [Number(data.water_chart_price)],
        content: '{nt}元',
        style: {
          fontSize: 20,
          fill: '#3de7c9'
        }
      }
      
      
      _this.configGauge = data.gauge_chart
      _this.loading = false
    }).catch(function (error) {
      console.log(error);
    });

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .th-middle {
    width: 40%;
    height: 3rem;
    margin-top: 1.5rem;
  }

  .title {
    position: absolute;
    font-size: 1.5rem;
    font-weight: 700;
    left: 49%;
    top: 0.8rem;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    color: #fff;
  }
}

.contenter {
  display: flex;
  justify-content: space-between;

  .content-left {
    flex: 4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    .Live-item {
      width: 47%;
      height: 25rem;
      margin: 0.5rem;

      .live-title {
        margin-bottom: 1rem;
        color: #fff;
      }
    }
  }

  .content-middle {
    flex: 4;
    .max-box {
      height: 31rem;
      .flyline {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        padding-top: 1rem;
      }
    }
    .middle-price {
      position: absolute;
      bottom: 1rem;
      left: 0;
      font-size: 1rem;
      color: #fff;
    }
    .box-list {
      display: flex;
      justify-content: space-between;
      width: 100%;
      .box {
        width: 50%;
        height: 28.5rem;
        margin: 1rem 1rem 1rem;
        padding: 0rem 2rem;
        box-sizing: border-box;
        overflow: hidden;
      }
    }
  }
  .content-right {
    flex: 2;
    padding-left: 2rem;
    box-sizing: content-box;
    .box {
      height: 18rem;
      box-sizing: border-box;
    }

    .box-01 {
      height: 22rem;
      padding-bottom: 1rem;
    }

    .box-03 {
      padding-top: 1rem;
      height: 22rem;
    }
  }
  .content-last-right {
    flex: 2;
  }
}

.chartStyle {
  position: relative;
  // height: 18rem;
  .charts-canvas-container {
    position: absolute;
    top: -30px;
  }
}

.box-text-style {
  color: #fff;
  font-size: 1rem;
  padding: 1rem;
}

.configWater {
  width: 10rem;
  height: 10rem;
  margin: 0 auto;
}
</style>
